<template>
  <div class="container questions-randoms">
    <el-card class="el-crad-randoms">
      <el-form
        class="questions-randoms-search"
        :model="randomsData"
        ref="randomsData"
      >
        <el-form-item label="关键字" class="search-input">
          <el-input
            type="text"
            size="small"
            placeholder="根据编号搜索"
            style="width: 300px"
            v-model="randomsData.keyword"
          ></el-input>
        </el-form-item>
        <el-form-item class="search-button">
          <el-button size="small" @click="resetSearch">清除</el-button>
          <el-button size="small" type="primary" @click="searchQuestion"
            >搜索</el-button
          >
        </el-form-item>
      </el-form>
      <el-alert type="info" :closable="false" show-icon
        >数据一共 {{ counts }} 条</el-alert
      >
      <el-table :data="randomsList" style="width: 100%; margin: 10px 0">
        <el-table-column prop="id" label="编号" width="220px">
        </el-table-column>
        <el-table-column
          prop="questionType"
          :formatter="formatQSType"
          width="80px"
          label="题型"
        >
        </el-table-column>
        <el-table-column label="题目编号" width="240px">
          <template #default="{ row }">
            <p
              style="margin: 0; padding: 0"
              v-for="item in row.questionIDs"
              :key="item.number"
            >
              <el-button style="margin: 0; padding: 0" type="text" @click="showDialog(item)">{{
                item.number
              }}</el-button>
            </p>
          </template>
        </el-table-column>
        <el-table-column prop="addTime" width="180px" label="录入时间">
        </el-table-column>
        <el-table-column prop="totalSeconds" label="答题时间(s)">
        </el-table-column>
        <el-table-column prop="accuracyRate" label="正确率(%)">
        </el-table-column>
        <el-table-column prop="userName" label="录入人"> </el-table-column>
        <el-table-column width="80px" label="操作">
          <template #default="{ row }">
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              circle
              plain
              @click="delQSRandom(row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="Number(randomsData.page)"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="Number(randomsData.pagesize)"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Number(counts)"
      >
      </el-pagination>
    </el-card>
    <QSPreview :dialogVisible.sync="isShow" :questionsInfo="questionsInfo"></QSPreview>
  </div>
</template>

<script>
import { randoms, removeRandoms } from '@/api/hmmm/questions.js'
import QSPreview from '@/module-hmmm/components/questions-preview2'
import { questionType } from '@/api/hmmm/constants.js'

export default {
  name: 'Randoms',
  components: { QSPreview },
  data () {
    return {
      questionsInfo: {},
      isShow: false,
      randomsList: [],
      questionType,
      counts: 0,
      randomsData: {
        page: 1,
        pagesize: 20,
        keyword: ''
      }
    }
  },
  created () {
    this.getRandomsList()
  },
  methods: {
    // 获取题组列表
    async getRandomsList (params) {
      const {
        data: { counts, items }
      } = await randoms(this.randomsData)
      this.randomsList = items
      this.counts = counts
    },

    formatQSType (row, column, cellValue, index) {
      // if (cellValue === '1') return '单选'
      // if (cellValue === '2') return '多选'
      // if (cellValue === '3') return '简答'
      const res = questionType.find(item => item.value === +cellValue)
      return res ? res.label : '未知'
    },

    // 删除题组
    async delQSRandom (question) {
      this.$confirm('是否永久删除该题组?', '提示')
        .then(async () => {
          await removeRandoms({ id: question })
            .then(() => {
              this.$message.success('删除成功')
              if (this.randomsData.page > 1 && this.randomsList.length === 1) {
                this.randomsData.page--
              }
              this.getRandomsList()
            })
            .catch(() => {
              this.$message.error('删除失败')
            })
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    },

    // 每页显示的条数
    handleSizeChange (val) {
      this.randomsData.pagesize = val
      this.randomsData.page = 1
      this.getRandomsList(this.randomsData)
    },

    // 去到某一页
    handleCurrentChange (val) {
      this.randomsData.page = val
      this.getRandomsList()
    },

    // 清空关键字输入框
    resetSearch () {
      this.randomsData.keyword = ''
      this.getRandomsList()
    },

    // 查询功能
    searchQuestion () {
      this.randomsData.page = 1
      this.getRandomsList(this.randomsData)
    },

    // 预览题组
    showDialog (item) {
      this.questionsInfo = item
      this.isShow = true
    }
  }
}
</script>

<style scoped lang="scss">
.questions-randoms {
  padding: 20px;
  .questions-randoms-search {
    display: flex;
    justify-content: space-between;
    .search-input {
      display: flex;
      width: 500px;
      margin-left: 20px;
    }
  }
}
</style>
